<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="book.js"></script>
<script src="bookStoreService.js"></script>
<style>
    .mainDiv {
        display: flex;
    }

    .showDiv {
        width: 800px;
        height: 800px;
        border: 2px solid black;
        /*background-color: olivedrab;*/
        visibility: hidden;
        /*position: relative;*/
        /*left: 0px;*/
        /*top: 0px;*/
    }

    .showDiv > span {
        font-size: 20px;
        color: red;
    }

    .showDiv > div {
        font-size: 36px;
    }

    .buyDiv {
        background-color: rgba(255, 0, 0, 0.5);
        left: 0px;
        top: 0px;
        position: absolute;
        visibility: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .buyDiv_2 {
        width: 600px;
        height: 400px;
        background-color: white;
        border: 2px solid black;
    }

    .buyDiv_2 > div {
        width: 120px;
    }
</style>
<body>
<div class="mainDiv">
    <div id="showDiv" class="showDiv">
        <span>封面：</span>
        <div style="width: 400px;height: 400px">
            <img id="showBook" style="width: 100% ; height: 100%">
        </div>
        <span>书名：</span>
        <div id="showBookName"></div>
        <span>作者：</span>
        <div id="showBookWriter"></div>
        <span>发售价：</span>
        <div id="showBookContent"></div>
    </div>

    <table border="1" width="80%">
        <thead>
        <tr>
            <th></th>
            <th>图书名</th>
            <th>作者</th>
            <th>售价</th>
            <th></th>
        </tr>
        <tbody id="data"></tbody>
        </thead>
    </table>
</div>

<div class="buyDiv" id="buyDiv">
    <div class="buyDiv_2">
        总金额：<span id="allMoney"></span>
        <table border="1" width="80%">
            <thead>
            <tr>
                <th>图书名</th>
                <th>作者</th>
                <th>售价</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tbody id="ddd"></tbody>
            </thead>
        </table>

        <input type="button" value="继续购物" onclick="closeDiv()">
        <input type="button" value="结算" id="ok" onclick="end()">
    </div>
</div>
</body>
</html>